extends ./layouts/default

block title
  title Koa Douban 首页

block content
  style.
    header {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      background: #00474f;
      color: #E7DACB;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      z-index: 500;
    }

    @media (min-width: 768px) {
      .sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 4rem;
        z-index: 1000;
        height: calc(100vh - 4rem);
        border-right: 1px solid rgba(0,0,0,.1);
        order: 0;
        border-bottom: 1px solid rgba(0,0,0,.1);
      }

      .cat-links {
        display: block!important;
        max-height: calc(100vh - 9rem);
        overflow-y: auto;
        padding-top: 1rem;
        padding-bottom: 1rem;
        margin-right: -15px;
        margin-left: -15px;
      }
    }

    .sidebar-link {
      display: block;
      padding: .25rem 1.5rem;
      font-weight: 500;
      color: rgba(0,0,0,.65);
    }

    .sidebar .nav > li > a {
      display: block;
      padding: .25rem 1.5rem;
      font-size: 90%;
      color: rgba(0,0,0,.65);
    }

    .sidebar-item.active > .sidebar-inner {
      display: block;
    }
    .card {
      margin-bottom: 1.5rem;
    }
    .switcher {
      position: relative;
      padding: 1rem 15px;
      margin-right: -15px;
      margin-left: -15px;
      border-bottom: 1px solid rgba(0,0,0,.05);
    }
    .sidebar-toggle {
      line-height: 1;
      color: #212529;
    }
    .p-0 {
      padding: 0!important;
    }
    .ml-3, .mx-3 {
      margin-left: 1rem!important;
    }
    .btn-link {
      font-weight: 400;
      color: #007bff;
      background-color: transparent;
    }

  include ./includes/header

  .container-fluid
    .row
      .col-12.col-md-3.col-xl-2.sidebar
        .collapse.cat-links
          .sidebar-item.active
            a.sidebar-link(href='/') Links
            ul.nav.sidebar-inner
              li.active.sidebar-inner-active
                a(href='/') Link1
              li.sidebar-inner-active
                a(href='/') Link2
      .col-12.col-md-9.col-xl-9.py-md-3.pl-md-5.content
        .row
          .col-md-6
            .card
              img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='http://video.iblack7.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4')
              .card-body
                h4.card-title 这是电影标题
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
          .col-md-6
            .card
              img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='http://video.iblack7.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4')
              .card-body
                h4.card-title 这是电影标题
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
        .row
          .col-md-6
            .card
              img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='http://video.iblack7.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4')
              .card-body
                h4.card-title 这是电影标题
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
          .col-md-6
            .card
              img.card-img-top(src='http://o9spjqu1b.bkt.clouddn.com/5570778b-f7fc-4bcf-9df3-e47a6954b75a', data-video='http://video.iblack7.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4')
              .card-body
                h4.card-title 这是电影标题
                p.card-desc 这是电影描述
              .card-footer
                small.text-muted 1 天前更新
  #myModal.modal.fade.bd-example-modal-lg(tabindex="-1", role="dialog", aria-labelledby="myLargeModalLabel", aria-hidden="true")
    .modal-dialog.modal-lg
      #videoModal.modal-content

  include ./includes/script

  script.
    var player = null

    $(document).ready(function () {
      $('#myModal').on('hidden.bs.modal', function (e) {
        if (player && player.pause) player.pause()
      })

      $('.card-img-top').click(function (e) {
        var video = $(this).data('video')
        var image = $(this).attr('src')

        $('#myModal').modal('show')

        if (!player) {
          player = new DPlayer({
            container: document.getElementById('videoModal'),
            screenshot: true,
            video: {
              url: video,
              pic: image,
              thumbnails: image
            }
          })
        } else {
          if (play.video.currentSrc !== video) {
            player.switchVideo({
              url: video,
              pic: image,
              type: 'auto'
            })
          }
        }
      })
    })






